<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { useI18n } from '@/hooks/web/useI18n'
import { Table } from '@/components/Table'
import { ref, unref, reactive } from 'vue'
import { ElButton, ElDrawer } from 'element-plus'
import { useTable } from '@/hooks/web/useTable'
import { Search } from '@/components/Search'
import Detail from './components/Detail.vue'
import { feedbackListApi } from '@/api/feedback'
import { FeedbackItem } from '@/api/feedback/types'
import { CrudSchema, useCrudSchemas } from '@/hooks/web/useCrudSchemas'
import { createImageViewer } from '@/components/ImageViewer'

const { t } = useI18n()

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { pageSize, currentPage } = tableState
    const res = await feedbackListApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: res.data.list || [],
      total: res.data.total || 0
    }
  }
})

const { total, loading, dataList, pageSize, currentPage } = tableState
const { getList } = tableMethods

const openPreview = (urlList: string[], initialIndex: number) => {
  createImageViewer({
    urlList,
    initialIndex,
    zIndex: 9999
  })
}

const crudSchemas = reactive<CrudSchema[]>([
  {
    field: 'feedbackNo',
    label: t('feedback.feedbackNo'),
    search: {
      hidden: true
    }
  },
  {
    field: 'content',
    label: t('feedback.content')
  },
  {
    field: 'imgs',
    label: t('feedback.images'),
    search: {
      hidden: true
    },
    table: {
      width: 210,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          const imgs = row.imgs
            .split(',')
            .map((it: string, i: number, arr: string[]) => (
              <img
                width={60}
                height={60}
                src={it}
                class={'mr-1'}
                onClick={() => openPreview(arr, i)}
              />
            ))
          return (
            <>
              <div class={'overflow-auto'}>{imgs}</div>
            </>
          )
        }
      }
    }
  },
  {
    field: 'contacts',
    label: t('feedback.contacts')
  },
  {
    field: 'mobile',
    label: t('feedback.mobile')
  },
  {
    field: 'createTime',
    label: t('feedback.feedbackTime'),
    search: {
      component: 'DatePicker',
      componentProps: {
        type: 'datetimerange',
        valueFormat: 'YYYY-MM-DD HH:mm:ss'
      }
    }
  },
  {
    field: 'action',
    label: t('userDemo.action'),
    form: {
      hidden: true
    },
    detail: {
      hidden: true
    },
    search: {
      hidden: true
    },
    table: {
      width: 100,
      slots: {
        default: (data: any) => {
          const row = data.row as any
          return (
            <>
              <ElButton
                v-hasPermi="GET /feedback/details"
                type="primary"
                link
                onClick={() => action(row, 'detail')}
              >
                {t('exampleDemo.detail')}
              </ElButton>
            </>
          )
        }
      }
    }
  }
])

const { allSchemas } = useCrudSchemas(crudSchemas)

const searchParams = ref({})
const setSearchParams = (params: any) => {
  const { createTime, ...rest } = params
  let startTime, endTime
  if (createTime && createTime.length > 0) {
    startTime = createTime[0]
    endTime = createTime[1]
  }
  currentPage.value = 1
  searchParams.value = {
    startTime,
    endTime,
    ...rest
  }
  getList()
}

const currentRow = ref<FeedbackItem>()
const showDrawer = ref(false)
// const saveLoading = ref(false)

const action = (row: FeedbackItem, _type: string) => {
  currentRow.value = { ...row }
  showDrawer.value = true
}
</script>

<template>
  <div class="flex w-100% h-100%">
    <ContentWrap class="flex-[3] ml-20px">
      <Search
        :schema="allSchemas.searchSchema"
        @reset="setSearchParams"
        @search="setSearchParams"
      />
      <Table
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :columns="allSchemas.tableColumns"
        :data="dataList"
        :loading="loading"
        @register="tableRegister"
        :pagination="{
          total
        }"
      />
    </ContentWrap>
  </div>
  <ElDrawer :title="t('feedback.detail')" v-model="showDrawer" direction="rtl" size="650px">
    <Detail :current-row="currentRow" />
  </ElDrawer>
</template>

<style lang="less" scoped>
/deep/.el-popper {
  max-width: 300px !important;
}
</style>
